<template>
	<view class="body">
		<view class="topbar">
			<view class="top">
				<view class="ul">
					<view class="li">发布悬赏信用<text>【极好】</text></view>
					<view class="li">累积发布<text>62</text></view>
					<view class="li">好评率<text>95%</text></view>
				</view>
				<view class="ul">
					<view class="li">完成悬赏信用<text>【极好】</text></view>
					<view class="li">收到好评<text>12</text></view>
					<view class="li">好评率<text>94%</text></view>
				</view>
			</view>
			<view class="tab">
				<view :class="currentIndex == index ? 'item active' : 'item'" v-for="(item,index) in tabArr"
					:key="index" @click="handleTab(index)">
					<view class="name">{{item.name}}</view>
					<view class="num" v-if="item.num">{{item.num}}</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="li" v-for="(item,index) in list" :key="index">
				<view class="user">
					<view class="left">
						<view class="head">
							<image :src="'http://shundaiwang.maiss.cn/' + item.avatar"></image>
						</view>
						<view class="name">
							<text>{{item.nickname}}</text>
							<view class="tag">{{item.user_status_display}}</view>
						</view>
					</view>
					<view class="right">
						<view class="icon">
							<u-icon name="heart-fill" color="#ff0000" size="40"></u-icon>
						</view>
						<view class="text">{{item.rating_display}}</view>
					</view>
				</view>
				<view class="desc">{{item.content}}</view>
				<view class="time">
					<view class="date">{{item.created_at}}</view>
					<view class="address">中国</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabArr: [{
						name: "全部",
						num: ""
					},
					{
						name: "好评",
						num: "37"
					},
					{
						name: "来自买家",
						num: "33"
					},
					{
						name: "来自卖家",
						num: "22"
					},
				],
				currentIndex: 0,
				list:[],
				queryForm:{
					user_id:"",
					rating:"",
					user_status:"",
				}
			}
		},
		onLoad(options) {
			this.queryForm.user_id = uni.getStorageSync('userInfo').rid
			this.getList()
		},
		methods: {
			//tab切换
			handleTab(index) {
				this.currentIndex = index
				if(index == 0){
					this.queryForm = {
						user_id:uni.getStorageSync('userInfo').rid,
						rating:"",
						user_status:"",
					}
				}else if(index == 1){
					this.queryForm = {
						user_id:uni.getStorageSync('userInfo').rid,
						rating:"0",
						user_status:"",
					}
				}else if(index == 2){
					this.queryForm = {
						user_id:uni.getStorageSync('userInfo').rid,
						rating:"0",
						user_status:"0",
					}
				}else if(index == 3){
					this.queryForm = {
						user_id:uni.getStorageSync('userInfo').rid,
						rating:"0",
						user_status:"1",
					}
				}
				this.getList()
			},
			//获取评价列表
			getList() {
				this.$Api.getEvaluateList(this.queryForm).then(res => {
					console.log('获取评价列表', res)
					this.list = res.result
				}, err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 94%;
		margin: 0 auto;

		.topbar {
			width: 100%;
			background: #fff;
			padding: 30upx;
			box-shadow: 0 0 10upx #e5e5e5;
			position: fixed;
			left: 0;
			z-index: 999;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.ul {
					width: 48%;
					border-radius: 20upx;
					border: 2upx solid #e5e5e5;
					padding: 20upx;

					.li {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						margin-bottom: 10upx;

						&:last-child {
							margin-bottom: 0;
						}

						text {
							font-weight: bold;
							color: #414141;
							margin-left: 10upx;
						}
					}
				}
			}

			.tab {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30upx;

				.item {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28upx;
					background: #f5f5f5;
					border-radius: 10upx;
					padding: 10upx 20upx;

					&.active {
						background: #4094ff;

						.name,
						.num {
							color: #fff;
						}
					}

					.name {
						color: #414141;
					}

					.num {
						color: #333;
						margin-left: 10upx;
					}
				}
			}
		}

		.list {
			width: 100%;
			padding: 48% 0 10%;

			.li {
				width: 100%;
				background: #fff;
				border-radius: 20upx;
				padding: 30upx;
				margin-bottom: 30upx;

				&:last-child {
					margin-bottom: 0;
				}

				.user {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;
						justify-content: flex-start;

						.head {
							width: 60upx;
							height: 60upx;
							border-radius: 50%;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
								display: block;
								margin: 0 auto;
							}
						}

						.name {
							display: flex;
							align-items: center;
							justify-content: flex-start;
							margin-left: 20upx;

							text {
								color: #999;
								font-size: 28upx;
							}

							.tag {
								display: flex;
								align-items: center;
								justify-content: center;
								border-radius: 6upx;
								padding: 2upx 10upx;
								font-size: 24upx;
								margin-left: 20upx;
								color: #53b0ed;
								background: rgba(83, 176, 237, .2);

								&.mai {
									color: #d55f2c;
									background: rgba(213, 95, 44, .1);
								}
							}
						}
					}

					.right {
						position: relative;

						.icon {
							position: absolute;
							top: -2upx;
							left: -2upx;
							z-index: 99;
						}

						.text {
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 60upx;
							padding: 2upx 20upx;
							font-size: 20upx;
							margin-left: 20upx;
							color: #d55f2c;
							background: rgba(213, 95, 44, .1);
						}
					}
				}

				.desc {
					font-size: 28upx;
					color: #414141;
					margin: 20upx auto;
				}

				.time {
					color: #999;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-size: 24upx;

					.address {
						margin-left: 20upx;
					}
				}
			}
		}
	}
</style>